iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
Modern Web

【每天5分鐘】學前端系列 第 24

Day24【每天5分鐘】學前端 | JavaScript 迴圈控制 while

  • 分享至 

  • xImage
  •  

迴圈控制 while

forwhile 是很像的,
不過 for迴圈 適合用在 已知 循環次數的需求;
while迴圈 適合用在 未知 循環次數的需求。

格式如下:

while(條件){
    條件為 true 時,要執行的區域
}

條件false 則跳出迴圈,執行接續的其他程式碼。

舉例:

let i = 0;
while(i < 3){
    console.log(i);
    i++;
};

https://ithelp.ithome.com.tw/upload/images/20220925/201513461TmMNmbcrD.png
自訂義變數 i 為 0 , while 迴圈條件是 i < 3 時執行 console.log ( i ); 打印出 0 ,接著執行 i++ ( 0 + 1 )。
現在 i 為 1 , i 有 < 3 ,打印出 1 ,接著執行 i++ ( 1 + 1 )。
現在 i 為 2 , i 有 < 3 ,打印出 2 ,接著執行 i++ ( 2 + 1 )。
現在 i 為 3 , i 沒有 < 3 ,不執行,跳出迴圈。


運用 length

陣列 的內容,一個一個抓出來。

const team = ["小明", "小美", "小白"];
let i = 0;
while(team[i]){
    console.log(team[i]);
    i++;
};

https://ithelp.ithome.com.tw/upload/images/20220925/20151346GZkDiNqmO0.png

以下 2 個程式碼,觀察看看有什麼不同?

const team = ["小明", "小美", "小白"];
let i = 0;
while(i < 3){
    console.log(team[i]);
    i++;
};

https://ithelp.ithome.com.tw/upload/images/20220925/20151346Ait2ygSxNU.png

運用 length ,一樣可以達到效果。 不寫死數字 的寫法更為 彈性

const team = ["小明", "小美", "小白"];
let i = 0;
while(i < team.length){
    console.log(team[i]);
    i++;
};

https://ithelp.ithome.com.tw/upload/images/20220925/20151346Nwjl09vE9Q.png


無窮迴圈

條件 的設定,若永遠都為 true 時,將會進入 永無止盡 的深淵。
要特別注意喔!

// 壞掉的範例
let firework = true;
while(firework){
    console.log("煙火");
};

條件為 true ,就會一直執行打印字串煙火、煙火、煙火... 又跑到海枯石爛啦 XD

附上 while 介紹 W3School 連結MDN 連結


https://ithelp.ithome.com.tw/upload/images/20220925/20151346vB5kN8SMjX.png 自學指引:

  • do ... while
  • 使用 for 和使用 while 寫出結果一樣的程式
  • 試寫看看 while 迴圈裡面有 if 流程控制,並加入 break 或 continue


感謝閱讀,我們明天見囉~~~ /images/emoticon/emoticon29.gif


上一篇
Day23【每天5分鐘】學前端 | JavaScript 迴圈控制 for
下一篇
Day25【每天5分鐘】學前端 | JavaScript 函式 function
系列文
【每天5分鐘】學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言